<template>
  <div class="user-collect">
    <div style="height: 20px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>我的收藏</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-tabs type="card" @tab-click="handleClick" style="height: 100%">
      <el-tab-pane label="视频" style="height: 100%" v-loading="dataLoading">
        <div v-if="dataList.length > 0" style="width: 100%; height: 100%">
          <CommonCollectItem :dataList="dataList"></CommonCollectItem>
          <el-pagination
            v-show="dataList.length > 0"
            layout="prev, pager, next"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
            :total="total"
            :page-count="7"
            background
            style="text-align: right; margin-top: 20px"
          >
          </el-pagination>
        </div>
        <div class="empty" v-else="!dataList.length > 0">
          <el-empty description="暂无数据"> </el-empty>
        </div>
      </el-tab-pane>
      <el-tab-pane label="书籍" style="height: 100%" v-loading="dataLoading">
        <div v-if="dataList.length > 0" style="width: 100%; height: 100%">
          <CommonCollectItem :dataList="dataList"></CommonCollectItem>
          <el-pagination
            v-show="dataList.length > 0"
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
            :total="total"
            background
            style="text-align: right; margin-top: 20px"
          >
          </el-pagination>
        </div>
        <div class="empty" v-else="!dataList.length > 0">
          <el-empty description="暂无数据"> </el-empty></div
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import CommonCollectItem from "@/components/CommonCollectItemView.vue";
import { getCollectList } from "@/api/client/collect";
import userModule from "@/utils/userInfo";

export default {
  name: "UserCollectView",
  components: {
    CommonCollectItem,
  },
  data() {
    return {
      dataList: [],
      currentPage: 1,
      page: 1,
      pageSize: 10,
      total: 0,
      dataLoading: false,
      type: "video",
    };
  },
  created() {
    this.getCollectList();
  },
  methods: {
    // 获取收藏列表
    async getCollectList() {
      try {
        this.dataLoading = true;
        const res = await getCollectList({
          page: this.page,
          pageSize: this.pageSize,
          type: this.type,
          userId: userModule.getUser().id,
        });
        this.dataList = res.data.records;
        this.total = res.data.total;
      } catch {
        this.$message.error("获取收藏列表失败");
      } finally {
        this.dataLoading = false;
      }
    },
    // 标签页切换
    handleClick(tab, event) {
      // 判断当前点击的是哪个标签页
      this.page = 1;
      const tabName = tab.label;
      if (tabName === "视频") {
        this.type = "video";
        this.getCollectList();
      } else if (tabName === "书籍") {
        this.type = "book";
        this.getCollectList();
      }
    },
    // 当前页发生改变时触发
    handleCurrentChange(val) {
      this.page = val;
      this.getCollectList();
    },
  },
};
</script>

<style>
</style>